<template>
  <div class="rescue-page">
    <!-- 背景图片 -->
    <div class="page_bg" :style="`background: url(${require('@/assets/images/indb.jpg')}) center top no-repeat;`"></div>
    
    <!-- 主要内容 -->
    <div class="container">
      <div class="row">
        <!-- 右侧主内容 -->
        <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
          <div class="list_box">
            <h2 class="left_h2">猫类</h2>
            <div class="product_list product_list2">
              <div 
                v-for="cat in cats" 
                :key="cat.id"
                class="col-sm-4 col-md-4 col-mm-6 product_img"
              >
                <a href="javascript:void(0)" @click.prevent>
                  <img 
                    :src="cat.image" 
                    class="img-thumbnail" 
                    :alt="cat.name"
                    @error="handleImageError"
                  >
                </a>
                <p class="product_title">
                  <a href="javascript:void(0)" @click.prevent :title="cat.name">{{ cat.name }}</a>
                </p>
              </div>
              
              <!-- 分页 -->
              <div class="pagebar">
                <div class="pagination">
                  <a class="page-item page-link st" href="javascript:;" title="上一页">&lt;&lt;</a>
                  <a href="javascript:void(0)" class="page-num page-num-current">1</a>
                  <a class="page-item page-link" href="javascript:;" title="当前页/总页数">1/1</a>
                  <a class="page-item page-link st" href="javascript:;" title="下一页">&gt;&gt;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 左侧边栏 -->
        <div class="col-xs-12 col-sm-4 col-md-3">
          <RescueSidebar activeCategory="cats" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RescueSidebar from '@/components/rescue/RescueSidebar.vue'

export default {
  name: 'RescueCatsPage',
  components: {
    RescueSidebar
  },
  data() {
    return {
      cats: [
        {
          id: 80,
          name: '大宝',
          image: require('@/assets/images/20230423/1682256877856387.jpg'),
          status: '救助中'
        },
        {
          id: 78,
          name: '达明',
          image: require('@/assets/images/20230423/1682256770898273.jpg'),
          status: '救助中'
        },
        {
          id: 76,
          name: '铁头',
          image: require('@/assets/images/20230423/1682256597498996.jpg'),
          status: '救助中'
        },
        {
          id: 75,
          name: '毛毛',
          image: require('@/assets/images/20230423/1682256552216745.jpg'),
          status: '救助中'
        }
      ]
    }
  },
  methods: {
    handleImageError(event) {
      // 如果图片加载失败，显示默认样式
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      if (parent && !parent.querySelector('.rescue-error-placeholder')) {
        const placeholder = document.createElement('div')
        placeholder.className = 'rescue-error-placeholder'
        placeholder.style.cssText = 'width:100%;height:200px;background:#04A07B;color:white;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:16px;'
        placeholder.textContent = '🐱 猫类救助'
        parent.appendChild(placeholder)
      }
    }
  }
}
</script>

<style scoped>
.rescue-page {
  padding-top: 0; /* 使用全局body padding-top */
  min-height: 100vh;
}

.page_bg {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  height: 200px;
  z-index: -1;
}

.list_box {
  background: #fff;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.left_h2 {
  color: #04A07B;
  border-left: 4px solid #04A07B;
  padding-left: 15px;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
}

.product_list2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.product_img {
  text-align: center;
  margin-bottom: 30px;
}

.product_img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.product_img img:hover {
  transform: scale(1.05);
}

.product_title {
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
}

.product_title a {
  color: #333;
  text-decoration: none;
}

.product_title a:hover {
  color: #04A07B;
}

.pagebar {
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.pagination {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pagination a {
  color: #666;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  margin: 0 2px;
  border-radius: 4px;
}

.pagination a:hover {
  background-color: #04A07B;
  color: white;
}

.page-num-current {
  background-color: #04A07B !important;
  color: white !important;
}

@media (max-width: 768px) {
  .product_img {
    width: 50% !important;
  }
}

@media (max-width: 480px) {
  .product_img {
    width: 100% !important;
  }
}
</style>